<template>
	<view>
		<view class="navbar">
			<view class="navbartitle">申诉详情</view>
			<image @click="cancela" class="navbarimage" src="../../static/icon/lefticon-icon.png"></image>
		</view>
		<view class="background_bg">
			<view style="width: 100%;height: 85rpx;"></view>
			<view v-if="value.status==1" style="font-size: 28rpx;font-weight: bold;color: #ffffff;margin-left: 35rpx;">已申诉</view>
			<view v-if="value.status==2" style="font-size: 28rpx;font-weight: bold;color: #ffffff;margin-left: 35rpx;">申诉已驳回</view>
			<view style="font-size: 26rpx;color: #ffffff;margin-left: 35rpx;margin-top: 5rpx;">您的申诉已被驳回，任何问题可以联系客服处理</view>
		</view>
		<view class="contentbox">
			<view class="commoditybox flex">
				<view class="commodity_image">
					<image mode="aspectFill" :src="value.commodity_picture"></image>
				</view>
				<view style="margin-left: 20rpx;font-size: 28rpx;color:#878787;">
					<view style="margin-top: 10rpx;">房间编号: </view>
					<view style="margin-top: 5rpx;">抓取时间: {{value.game_time}}</view>
					<view style="margin-top: 5rpx;">抓取状态: {{value.result==false?'未抓中':'抓中'}}</view>
				</view>
			</view>
			<view class="contenborder"></view>
			<view class="contentext">申诉理由：{{value.title}}</view>
			<view class="contentext">申诉原因：{{value.info}}</view>
			<view class="voucher flex">
				<view>申诉凭证：</view>
				<view class="voucherlist">
					<image mode="aspectFill" src="https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FrycoRdwp_e0-QhD_QGJ6-bQFpbL.png?w=800&h=800"></image>
					<image mode="aspectFill" src="https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FrycoRdwp_e0-QhD_QGJ6-bQFpbL.png?w=800&h=800"></image>
					<image mode="aspectFill" src="https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FrycoRdwp_e0-QhD_QGJ6-bQFpbL.png?w=800&h=800"></image>
				</view>
			</view>
			<view class="contentext">申诉时间：{{value.create_time}}</view>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from "@/static/common.js";
	export default {
		data() {
			return {
				value: [],
			}
		},
		
		onLoad(e) {
			this.id = e.id
			this.getAppealdata(e.id)
		},
		
		methods: {
			async getAppealdata(e) {
				let apply = await request(`${getApp().globalData.http}user/getAppeal`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "GET", {
					token: getApp().globalData.token,
					appeal_id: this.id,
				})
				this.value = apply.data.data
			},
			
			//返回
			cancela(e){
				uni.navigateBack({
					dalta: 1,
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.background_bg {
		width: 100%;
		height: 230rpx;
		background-image: url(https://duimianimg.loovee.com/style/img/h5/ukaka/ukaka_h51705493057877/img/ukaka_dd_bg.b33b7f9.png);
		background-repeat: no-repeat;
		background-size: 100% auto;
	}

	.navbar {
		width: 100%;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		position: fixed;
		top: 0;
		left: 0;
	}

	.navbartitle {
		color: #ffffff;
		font-size: 32rpx;
		font-weight: 700;
	}

	.navbarimage {
		position: absolute;
		width: 35rpx;
		height: 35rpx;
		top: 30rpx;
		left: 20rpx;
	}
	
	.contentbox{
		margin-top: -50rpx;
		// height: 1000rpx;
		background-color: #ffffff;
		border-radius: 30rpx 30rpx 0 0;
		padding: 30rpx 30rpx;
	}
	
	.commoditybox{
		
	}
	
	.commodity_image{
		width:160rpx;
		height: 160rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}
	
	.commodity_image image{
		width: 100%;
		height: 100%;
	}
	
	.contenborder{
		margin: 30rpx 0;
		width: 100%;
		height: 1px;
		background:#f0f0f0;
	}
	
	.contentext{
		font-size: 28rpx;
		color:#353535;
		margin-bottom: 10rpx;
	}
	
	.voucher{
		// margin-top:50rpx;
		margin-top: 30rpx;
		margin-bottom: 20rpx;
	}
	
	.voucherlist{
		display: flex;
		align-items: center;
	}
	
	.voucherlist image{
		width: 120rpx;
		height: 120rpx;
		border-radius: 20rpx;
		background-color:#F8F8F8;
		margin-right: 20rpx;
	}
</style>
